<template>
    <vue-simplebar>
        <div class="page-container" v-loading="loading">
            <div class="page-filter-option mb-3">
                <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                    <el-form-item>
                        <el-input :placeholder="$t('form.inputPlaceholder')" suffix-icon="el-icon-search" class="input-search-select"
                                  v-model="filterOption.keyword" @change="filterChange" clearable>
                            <el-select slot="prepend" v-model="filterOption.keyword_column">
                                <el-option label="SN" value="sn"></el-option>
                                <el-option label="UID" value="uid"></el-option>
                                <el-option label="lineCode" value="line_code"></el-option>
                                <el-option :label="$t('game.user.account_id')" value="account_id"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <component-page-org-tree-option-check v-model="filterOption.plat_code" @change="filterChange"></component-page-org-tree-option-check>
                    </el-form-item>
                    <el-form-item>
                        <component-page-org-tree-option-check v-model="filterOption.plat_code_exclude" @change="filterChange" :placeholder="$t('platform.setting.tree.org-exclude')"></component-page-org-tree-option-check>
                    </el-form-item>
                    <el-form-item>
                        <component-page-game-option v-model="filterOption.game_id" @change="filterChange"></component-page-game-option>
                    </el-form-item>
                    <el-form-item>
                        <component-page-game-option v-model="filterOption.game_id_exclude" @change="filterChange" :placeholder="$t('game.setting.game.exclude')"></component-page-game-option>
                    </el-form-item>
                    <el-form-item>
                        <component-page-option-currency v-model="filterOption.currency" @change="filterChange"></component-page-option-currency>
                    </el-form-item>
                    <el-form-item>
                        <component-page-option-currency v-model="filterOption.currency_exclude" @change="filterChange" :placeholder="$t('game.setting.currency.exclude')"></component-page-option-currency>
                    </el-form-item>
                    <el-form-item>
                        <component-page-option-field-range :field-list="fieldList" v-model="filterOption.fieldRange" @change="filterChange"></component-page-option-field-range>
                    </el-form-item>
                    <el-form-item class="small">
                        <el-select :placeholder="$t('game.data.settlement.player_type')" v-model="filterOption.player_type" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('game.data.settlement.playerTypeList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="small">
                        <el-select :placeholder="$t('game.data.settlement.status')" v-model="filterOption.status" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('game.data.settlement.statusList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="filterOption.datetime_column" @change="filterChange" style="width: 110px;">
                            <el-option :label="$t('game.data.settlement.start_time')" value="start_time"></el-option>
                            <el-option :label="$t('game.data.settlement.end_time')" value="end_time"></el-option>
                        </el-select>
                        <component-page-option-datetime-range type="datetimerange" align="center" defaultShortcuts
                                                              :init-last-day="1" v-model="filterOption.datetime" @change="filterChange">
                        </component-page-option-datetime-range>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="danger" @click="exports">{{ $t('action.export') }}</el-button>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                    <el-form-item>
                        <el-checkbox v-model="view.slo" border>SLO {{ $t('action.search') }}</el-checkbox>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="small">
                        <el-select :placeholder="$t('game.data.settlement.ext.spin_type')" v-model="filterOption.ext.spin_type" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('game.data.settlement.spinTypeList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="small">
                        <el-select :placeholder="$t('game.data.settlement.ext.is_free')" v-model="filterOption.ext.is_free" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="small">
                        <el-select :placeholder="$t('game.data.settlement.ext.is_free_trigger')" v-model="filterOption.ext.is_free_trigger" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="medium">
                        <el-select :placeholder="$t('game.data.settlement.ext.free_trigger_source')" v-model="filterOption.ext.free_trigger_source" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('game.data.settlement.freeTriggerSourceList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="small">
                        <el-select :placeholder="$t('game.data.settlement.ext.is_bonus')" v-model="filterOption.ext.is_bonus" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="view.slo" class="small">
                        <el-select :placeholder="$t('game.data.settlement.ext.is_bonus_trigger')" v-model="filterOption.ext.is_bonus_trigger" @change="filterChange" clearable>
                            <el-option v-for="(item, index) in $t('form.booleanList')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <component-page-summary class="mb-3" init-more v-slot="{ option }">
                <el-row :gutter="10">
                    <el-col :xl="12">
                        <el-form :inline="true" class="detail">
                            <strong>{{ $t('form.summary') }} (USD)</strong><br>
                            <el-form-item :label="$t('game.data.settlement.bet_base')">
                                <component-page-numeral :num="dataStats.usd.bet_base" format="0,0.[00]"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.bet_num')">
                                <component-page-numeral :num="dataStats.usd.bet_num" format="0,0.[00]"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_player')">
                                <component-page-numeral :num="dataStats.usd.gain_player" format="0,0.[00]"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_sys')">
                                <component-page-numeral :num="dataStats.usd.gain_sys" format="0,0.[00]"></component-page-numeral>
                            </el-form-item>
                            <el-form-item label="RTP">
                                <component-page-numeral :num="dataStats.usd.rtp" format="0,0.[00]"></component-page-numeral>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :xl="12" v-for="(item,index) in dataStats.sts" :key="index" v-if="option.more">
                        <el-form :inline="true" class="detail">
                            <strong>{{ item.currency }}</strong><br>
                            <el-form-item :label="$t('game.data.settlement.bet_base')">
                                <component-page-numeral :num="item.bet_base"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.bet_num')">
                                <component-page-numeral :num="item.bet_num"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_player')">
                                <component-page-numeral :num="item.gain_player"></component-page-numeral>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_sys')">
                                <component-page-numeral :num="item.gain_sys"></component-page-numeral>
                            </el-form-item>
                            <el-form-item label="RTP">
                                <component-page-numeral :num="item.rtp"></component-page-numeral>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </component-page-summary>
            <div class="page-container-inner-fluid flex-auto flex flex-col">
                <component-page-content-resize v-slot="{ content }">
                    <el-table style="width: 100%" :height="content.height" ref="table"
                              :data="dataList"
                              :default-sort="{prop: filterOption.order_column, order: filterOption.order_key}"
                              @sort-change="filterOrderChange"
                              highlight-current-row>
                        <el-table-column min-width="280" label="SN" prop="sn">
                            <template slot-scope="scope">
                                <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.sn }}</div>
                                <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.sn, filterOption.keyword)"></div>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" label="UID" prop="uid">
                            <template slot-scope="scope">
                                <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.uid }}</div>
                                <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.uid, filterOption.keyword)"></div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="150" label="lineCode" prop="line_code">
                            <template slot-scope="scope">
                                <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.line_code }}</div>
                                <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.line_code, filterOption.keyword)"></div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="200" :label="$t('platform.setting.tree.org')" prop="plat_code">
                            <template slot-scope="scope">{{ scope.row.org.name || scope.row.plat_code }}</template>
                        </el-table-column>
                        <el-table-column min-width="200" :label="$t('game.user.account_id')" prop="account_id" fixed="left">
                            <template slot-scope="scope">
                                <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.account_id }}</div>
                                <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.account_id, filterOption.keyword)"></div>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.setting.game.name')" prop="game_id">
                            <template slot-scope="scope">
                                <component-page-games :game-code="scope.row.game_id"></component-page-games>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.setting.currency.name')" prop="currency"></el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.bet_base')" prop="bet_base" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.bet_base"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.bet_num')" prop="bet_num" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.bet_num"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.gain_player')" prop="gain_player" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.gain_player"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.gain_sys')" prop="gain_sys" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.gain_sys"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.balance_start')" prop="balance_start">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.balance_start"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.balance_end')" prop="balance_end">
                            <template slot-scope="scope">
                                <component-page-numeral :num="scope.row.balance_end"></component-page-numeral>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.player_type')" prop="player_type">
                            <template slot-scope="scope">
                                <el-tag effect="plain" size="mini" :type="{1:'info',2:'warning'}[scope.row.player_type]">
                                    {{ $t('game.data.settlement.playerTypeList')[scope.row.player_type].label }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="150" :label="$t('game.data.settlement.status')" prop="status">
                            <template slot-scope="scope">
                                <el-tag effect="plain" size="mini" :type="{1:'info',2:'warning'}[scope.row.status]">
                                    {{ $t('game.data.settlement.statusList')[scope.row.status].label }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="220" :label="$t('game.data.settlement.start_time')" prop="start_time" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-timestamp :timestamp="scope.row.start_time"></component-page-timestamp>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="220" :label="$t('game.data.settlement.end_time')" prop="end_time" sortable="custom" :sort-orders="['descending', 'ascending']">
                            <template slot-scope="scope">
                                <component-page-timestamp :timestamp="scope.row.end_time"></component-page-timestamp>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="150" :label="$t('game.data.settlement.ext.spin_type')" prop="ext.spin_type">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.spin_type == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`game.data.settlement.spinTypeList.${scope.row.ext.spin_type}`) ? $t(`game.data.settlement.spinTypeList.${scope.row.ext.spin_type}.label`) : scope.row.ext.spin_type }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="150" :label="$t('game.data.settlement.ext.is_free')" prop="ext.is_free">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.is_free == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`form.booleanList.${scope.row.ext.is_free}`) ? $t(`form.booleanList.${scope.row.ext.is_free}.label`) : scope.row.ext.is_free }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="150" :label="$t('game.data.settlement.ext.is_free_trigger')" prop="ext.is_free_trigger">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.is_free_trigger == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`form.booleanList.${scope.row.ext.is_free_trigger}`) ? $t(`form.booleanList.${scope.row.ext.is_free_trigger}.label`) : scope.row.ext.is_free_trigger }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="200" :label="$t('game.data.settlement.ext.free_trigger_source')" prop="ext.free_trigger_source">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.free_trigger_source == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`game.data.settlement.freeTriggerSourceList.${scope.row.ext.free_trigger_source}`) ? $t(`game.data.settlement.freeTriggerSourceList.${scope.row.ext.free_trigger_source}.label`) : scope.row.ext.free_trigger_source }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="150" :label="$t('game.data.settlement.ext.is_bonus')" prop="ext.is_bonus">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.is_bonus == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`form.booleanList.${scope.row.ext.is_bonus}`) ? $t(`form.booleanList.${scope.row.ext.is_bonus}.label`) : scope.row.ext.is_bonus }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="view.slo" min-width="150" :label="$t('game.data.settlement.ext.is_bonus_trigger')" prop="ext.is_bonus_trigger">
                            <template slot-scope="scope">
                                <div v-if="scope.row.ext == null || scope.row.ext.is_bonus_trigger == null">----</div>
                                <el-tag v-else effect="plain" size="mini" type="info">
                                    {{ $te(`form.booleanList.${scope.row.ext.is_bonus_trigger}`) ? $t(`form.booleanList.${scope.row.ext.is_bonus_trigger}.label`) : scope.row.ext.is_bonus_trigger }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column width="100" :label="$t('game.data.settlement.operation')" align="right" fixed="right">
                            <template slot-scope="scope">
                                <span class="operation-options-icon">
                                    <i @click="drawerItemPlayback(scope)" class="el-icon-c-scale-to-original"></i>
                                </span>
                                <span class="operation-options-icon">
                                    <i class="el-icon-view" @click="drawerItemDetails(scope)"></i>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </component-page-content-resize>
                <div class="text-right p-4">
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                                   :current-page="filterOption.page"
                                   :page-size.sync="filterOption.page_size"
                                   :total="dataMeta.total"
                                   @size-change="filterChange"
                                   @current-change="filterPageChange">
                    </el-pagination>
                </div>
            </div>
            <item-details :visible.sync="drawer.visible.details" :data="itemCache"></item-details>
            <item-playback :visible.sync="drawer.visible.playback" :data="itemCache"></item-playback>
        </div>
    </vue-simplebar>
</template>

<script>
import ItemDetails from './ItemDetails.vue'
import ItemPlayback from './ItemPlayback.vue'

export default {
    components: {
        ItemDetails,
        ItemPlayback,
    },
    data() {
        return {
            loading: false,
            filterOption: {
                fieldRange: {},
                plat_code: [],
                plat_code_exclude: [],
                game_id: [],
                game_id_exclude: [],
                currency: [],
                currency_exclude: [],
                datetime: null,
                datetime_column: 'end_time',
                player_type: null,
                status: null,
                keyword: '',
                keyword_column: 'account_id',
                page: 1,
                page_size: 30,
                order: 'desc',
                order_key: 'descending',
                order_column: 'end_time',
                ext: {
                    spin_type: null,
                    is_free: null,
                    is_free_trigger: null,
                    free_trigger_source: null,
                    is_bonus: null,
                    is_bonus_trigger: null,
                },
            },
            view: {
                slo: false,
            },
            dataStats: {
                usd: {},
                sts: [],
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            itemCache: {},
            drawer: {
                visible: {
                    details: false,
                    playback: false,
                }
            },
            domain: {},
        }
    },
    computed: {
        fieldList: function () {
            return [{
                label: this.$t('game.data.settlement.bet_num'),
                value: 'bet_num'
            }, {
                label: this.$t('game.data.settlement.gain_player'),
                value: 'gain_player'
            }, {
                label: this.$t('game.data.settlement.gain_sys'),
                value: 'gain_sys'
            }];
        }
    },
    updated() {
        this.$refs.table.doLayout();
    },
    methods: {
        clearFilterOption() {
            this.loading = true;
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.loading = true;
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.filterOption.order_key = scope.order;
            this.filterOption.order_column = scope.prop;
            this.getDataList();
        },
        getDataList() {
            axios.get(this.$helper.makeQueryUrl(
                '/game/data/settlement/getList', this.filterOption
            )).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStats = response.data.resp_data.stats;
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                    this.domain = response.data.resp_data.domain;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        // 导出数据
        exports() {
            window.open(this.$helper.makeQueryUrl(
                '/game/data/settlement/export', this.filterOption
            ));
        },
        // 打开抽屉（详情）
        drawerItemDetails(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示抽屉
            this.drawer.visible.details = true;
        },
        // 打开抽屉（playback）
        drawerItemPlayback(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示抽屉
            this.drawer.visible.playback = true;
        },
    },
}
</script>

<style lang="scss">

</style>
